<template>
  <div class="Usermg">
    <section class="toolTop">
      <el-form :inline="true" class="demo-form-inline">
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item class="addBtn">
              <el-button icon="el-icon-plus" @click="addUserBtn">新 增 用 户</el-button>
              <el-button icon="el-icon-remove" @click="removeUserBtn">批 量 删 除</el-button>
              <el-button icon="el-icon-edit" @click="modifyPassButton">修 改 密 码</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </section>
    <section class="main_table">
      <el-table
        ref="multipleTable"
        v-bind:data="userData"
        style="width: 100%"
        v-bind:max-height="height"
        v-bind:header-cell-style="{background: '#1f2548',color:'#fff'}"
        v-bind:cell-style="{padding:'10px'}"
        @selection-change="handleSelectionChange"
        fit
      >
        <el-table-column align="center" type="selection" max-width="50"></el-table-column>
        <el-table-column align="center" prop="name" label="用户名称" max-width="100"></el-table-column>
        <el-table-column align="center" prop="phone" label="联系方式" max-width="100"></el-table-column>
        <el-table-column align="center" prop="email" label="电子邮箱" max-width="100"></el-table-column>
        <el-table-column align="center" prop="createDate" label="创建时间" max-width="100"></el-table-column>
        <el-table-column
          align="center"
          prop="active"
          label="激活状态"
          max-width="100"
          :formatter="activeFormatter"
        ></el-table-column>
        <el-table-column align="center" prop="remarks" label="备注" max-width="100"></el-table-column>
        <el-table-column align="center" label="操作" max-width="200">
          <template slot-scope="scope">
            <el-button type="danger" size="small" @click.native.prevent="deleteRow(scope.row)">删除</el-button>
            <el-button @click.native.prevent="rowClick(scope.row)" type="primary" size="small">编辑</el-button>
            <el-button
              @click.native.prevent="activeClick(scope.row)"
              type="primary"
              size="small"
            >激活锁定</el-button>
          </template>
        </el-table-column>
      </el-table>
      <section class="toolFoot">
        <el-row :gutter="25">
          <el-col :span="24" class="rightCol">
            <el-pagination
              small
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next,jumper"
              :total="total"
              :pager-count="5"
            ></el-pagination>
          </el-col>
        </el-row>
      </section>
    </section>
    <section class="dialogSec" v-bind:class="{'dialogshow' : handleDialog}">
      <el-form size="mini" label-position="right">
        <section class="title">
          <h3>用户设置</h3>
          <i class="el-icon-close" @click="handleDialog = false"></i>
        </section>
        <div class="wrap">
          <section class="top">
            <el-form-item
              v-for="item in formLabels"
              v-bind:label="item.label"
              v-bind:label-width="formLabelWidth"
              v-bind:key="item.name"
              v-bind:hidden="item.name == 'pass' && dialogButton"
            >
              <el-input v-model="form[item.name]"></el-input>
            </el-form-item>
          </section>
          <section class="main">
            <el-transfer
              :titles="['可选角色', '已选角色']"
              v-model="roleSetData"
              :props="{
                key: 'rId',
                label: 'roleName'
              }"
              :data="roleData"
            ></el-transfer>
          </section>
        </div>
        <section class="foot">
          <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="handleDialog = false">取 消</el-button>
            <el-button
              size="mini"
              type="primary"
              v-bind:hidden="dialogButton"
              @click="subAdd"
            >确 定 新 增</el-button>
            <el-button
              size="mini"
              type="primary"
              v-bind:hidden="!dialogButton"
              @click="subModify"
            >确 定 修 改</el-button>
          </div>
        </section>
      </el-form>
    </section>
    <section class="dialogSec" v-bind:class="{'dialogshow' : handlePassDialog}">
      <el-form size="mini" label-position="right">
        <section class="title">
          <h3>修改密码</h3>
          <i class="el-icon-close" @click="handlePassDialog = false"></i>
        </section>
        <div class="wrap">
          <section class="top">
            <el-form-item>
              <el-input placeholder="请输入新密码" v-model="newPass">
                <template slot="prepend">新密码</template>
              </el-input>
            </el-form-item>
          </section>
        </div>
        <section class="foot">
          <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="handlePassDialog = false">取 消</el-button>
            <el-button size="mini" type="primary" @click="modifyPass">确 定 修 改</el-button>
          </div>
        </section>
      </el-form>
    </section>
  </div>
</template>

<script type="text/javascript" src="../../api/usermg/usermg.js"></script>

<style lang="scss">
.Usermg {
  flex: 1;
  > section {
    margin-top: 16px;
    &.toolTop {
      height: auto !important;
      padding-bottom: 5px;
      > .el-form {
        border-radius: 5px;
        padding: 8px 16px;
        .el-form-item {
          margin-bottom: 0;
          .el-button {
            background-color: #161836;
            font-size: 14px;
            padding: 8px 16px;
            color: #85899c;
            border: 1px solid #85899c;
          }
          .el-button:hover,
          .el-button:focus {
            background-color: #161836;
            font-size: 14px;
            padding: 8px 16px;
            color: #fff;
            border: 1px solid #fff;
          }
        }
      }
    }
    &.main_table {
      border-radius: 5px;
      padding: 14px;
      //background-color: #fff;
      margin-bottom: 16px;
      .cell {
        .el-button--primary {
          color: #85899c;
          background-color: #161836;
          border: 1px solid #85899c;
        }
        .el-button--primary:focus,
        .el-button--primary:hover {
          color: #ffffff;
          background-color: #44abf5;
          border: 1px solid #44abf5;
        }
      }
      > .toolFoot {
        margin-top: 16px;
        .btnCOl .el-button {
          color: #fff;
          border: 0;
          background-color: #2b354e;
          padding: 4px 8px;
        }
        .rightCol {
          text-align: right;
          .el-pagination--small {
            white-space: nowrap;
            padding: 2px 5px;
            color: #303133;
            font-weight: 700;
            height: 50px;
            span {
              color: #fff;
              line-height: 30px;
              .el-input {
                .el-input__inner {
                  height: 30px;
                  line-height: 30px;
                }
              }
            }
          }
        }
      }
    }

    &.dialogSec {
      .el-form {
        display: flex;
        flex-direction: column;
        .wrap {
          overflow: auto;
          section {
            &.top {
              .el-form-item {
                margin-bottom: 16px;
                .el-input-group__prepend {
                  width: 100px;
                }
              }
            }
            &.main {
              display: flex;
              justify-content: center;
              .el-transfer {
                display: inline-block;
                .el-transfer-panel {
                  border: none;
                  .el-transfer-panel__header {
                    background-color: #1f2548;
                    border-bottom: 1px solid #85899c;
                    .el-checkbox .el-checkbox__label {
                      color: #85899c;
                    }
                  }
                  .el-transfer-panel__body {
                    background-color: #1f2548;
                    .el-transfer-panel__item.el-checkbox {
                      color: #85899c;
                    }
                    .el-transfer-panel__item.el-checkbox.is-checked {
                      .el-checkbox__input.is-checked + .el-checkbox__label {
                        color: #ffffff;
                      }
                    }
                  }
                  .el-transfer__buttons {
                    .el-transfer__button.is-disabled,
                    .el-transfer__button.is-disabled:hover {
                      border: 1px solid #85899c;
                      background-color: #85899c;
                      color: #ffffff;
                    }
                  }
                }
                .el-transfer-panel__list {
                  padding: 6px 1px;
                  .el-checkbox {
                    margin-right: 67px;
                  }
                }
              }
            }
          }
        }
        .foot {
          .el-button--default {
            background-color: #161836;
            font-size: 14px;
            padding: 8px 16px;
            color: #85899c;
            border: 1px solid #85899c;
          }
          .el-button--default:hover,
          .el-button--default:focus {
            background-color: #161836;
            font-size: 14px;
            padding: 8px 16px;
            color: #fff;
            border: 1px solid #fff;
          }
          .el-button--primary {
            padding: 8px 16px;
            font-size: 14px;
            background-color: #44abf5;
            border: 1px solid #44abf5;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
